Ref. Site : https://www.devmedia.com.br/como-usar-a-propriedade-position-css/24451
A propriedade position foi estabelecida pela norma CSS 2.1 e funciona perfeitamente em todos os navegadores (browsers) modernos.
O foco dessa propriedade é posicionar os elementos da página de uma maneira diferente do normal com o bom e velho Float.
A propriedade position pode assumir 4 valores diferentes: Static, Relative, Absolute e Fixed.
Segue abaixo a explicação para de cada uma.
Nos exemplos a seguir sempre teremos uma tag span ( que é em linha ) dentro de uma tag pai paragrafo. Para destacar o objeto da posição que seria exibida coloquei um border 1px red no parágrafo. Sendo assim a tag parágrafo com o border red indica onde ele deveria ser exidido e o texto em si da tag span é onde realmente ele foi exibido. Lembrando que o deslocamento foi causado pela css position.
Position Estatic
Nesse modo os elementos da página são exibidos da direita para esquerda e de cima para baixo. Esse é o modo default que o browser exibe os objetos.
Lembre-se que a tag p é em bloco por esse motivo existe uma linha inteira com a borda vermelha enquanto a tag span é em linha e ela irá ocupar apenas o espaço necessário para sua exibição. Esse é o default. O importante é notar que o texto dentro da tag span foi exibido perfeitamente dentro da tag parágrafo.
Código:
<p style="position:static;">
<span style="border: 1px solid red">Position Estatic</span>
</p>
Como o próprio nome diz, relativo a posição que o browser normalmente exibiria o elemento.
Sendo assim, este posicionamento permite um deslocamento do elemento de sua posição original
que seria atribuída automaticamente pelo browser.
Como o deslocamento pode ser para qualquer lado no position Relative o elemento passa a aceitar as propriedades Top, Bottom, Left e Right.
Importante : No Position Relative a âncora é a posição onde o elemento atual seria renderizado, portanto os deslocamentos feitos pelos parâmetros Top, Bottom, Left e Right são feitos relativos a posição que o elemento ocuparia sem o position relative sempre relativos ao elemento anterior, seja ela o body ou outra tag qualquer.
Como é exibido :
Position Relative
Lembre-se que o default é o exemplo 1, o texto dentro das linhas vermelhas. Como usamos o position relative na tag span causamos um pequeno deslocamento de onde ela seria normalmente exibida, dados pelos parâmetros Top, Bottom, Left e Right o que fêz com que o texto ( da tag span ) fosse exibido fora da tag parágrafo cujo local seria onde ele normalmente seria exibido .
Código:
<p style="border: 1px solid red">
<span style="position:relative;top:40px;left:60px;">Position Relative</span>
</p>
Costumo associar a css position relative com uma 'escorregadinha' no deslocamento da tag. Aí você pergunta, pra que serve isso ? Veja o exemplo abaixo.
Como anda sua visão? Meio embaçada, difusa? Você pode estar precisando de um óculos novo Como anda sua visão? Meio embaçada, difusa? Você pode estar precisando de um óculos novo Como anda sua visão? Meio embaçada, difusa? Você pode estar precisando de um óculos novo
A position relative é muito boa para fazer o efeito sombra em imagens mas é muito raro usar porque as ocasiões para seu uso são raras mas é bom saber que ela existe. Existem outros recursos que fazem esse efeito mais facilmente mas para o aprendizado vale a pena.
Código:
<p style="border:1px solid red;height:30px;">
<span>Como anda sua visão? Meio embaçada, difusa? Você pode estar precisando de um óculos novo</span>
<span style="position:relative;top:1px;left:-687px;">Como anda sua visão? Meio embaçada, difusa? Você pode estar precisando de um óculos novo</span>
<span style="position:relative;top:1px;left:-1374px;">Como anda sua visão? Meio embaçada, difusa? Você pode estar precisando de um óculos novo</span>
</p>
Importante : A css position relative sempre tem sua âncora no elemento anterior, por esse motivo no exemplo acima o parâmetro left teve que ser alterado...para voltar a posição do elemento anterior.
O position Absolute é usada quando queremos posicionar diversos elementos dentro de uma tag em relação a tag pai que
hospeda diversas outras tags.
Lembre-se que tanto no static como no relative o posicionamento é sempre em relação ao elemento anterior e não a tag pai.
Com ele você pode posicionar qualquer elemento de acordo com o elemento pai que tenha
um position diferente de static.
Como é exibido :
Position Absolute Position Absolute Position Absolute
No exemplo acima a primeira tag é a tag pai é a tag parágrafo com a borda vermelha.
A segunda tag foi deslocada de 20px em relação ao topo e a esquerda da tag pai.
A terceira tag foi deslocada de 40px em relação ao topo e a esquerda da tag pai.
A quarta tag foi deslocada de 60px em relação ao topo e a esquerda da tag pai.
Código:
<p style="border: 1px solid red;position:relative">
<span style="position:absolute;top:20px;left:20px;outline: 1px solid #444;">Position Absolute</span>
<span style="position:absolute;top:40px ;left:40px;outline: 1px solid #444;">Position Absolute</span>
<span style="position:absolute;top:60px;left:60px;outline: 1px solid #444;">Position Absolute</span>
</p>
Outro detalhe que devemos ter cuidado é que ao utilizar o position absolute ela deixa o conteúdo exibido fora do fluxo comum ou normal do browser e por esse motivo ele pode colidir com os outros elementos da página no redimensionamento da página, por exemplo. No exemplo acima tive que colocar um monte de tags <br> para espaçar os elementos span das tags seguintes da página.
O position fixed se comporta de maneira semelhante ao absolute, deixando de fazer parte do fluxo comum da página.
Porém a grande diferença dele é que ele passa a se referenciar ao window do seu navegador, ou seja, a área que
aparece para o usuário independente de barra de rolagem.
Como é exibido :
Position Fixed 1 Position Fixed 2 Position Fixed 3
Como nos exemplos anterior a tag pai paragrafo tem uma borda vermelha e está visível no lugar esperado. Digamos que seguiu o fluxo normal dos elementos da janela embora esteja com o position relative mas como não tem nenhum parametro (top, bottom, left,right ) ela é relativa mas foi exibida exatamente como se fosse static.
Contudo como não há conteúdo dentro dela e por esse motivo ela foi exibida apenas como uma linha.
Se você olhar no canto superior esquerdo verá as tags span. Elas estão lá por causa do position fixed que
colocou as "âncoras" dos elementos na tag pai (body) e o deslocamento foi feito baseado nessa âncora.
Reparem também que rolando a página vertical o elemento permanece fixo na janela de exibição do browser.
Código:
<p style="border: 1px solid red;position:relative">
<span style="position:fixed;top:20px;left:20px;outline: 1px solid #444;">Position Fixed 1</span>
<span style="position:fixed;top:40px ;left:40px;outline: 1px solid #444;">Position Fixed 2</span>
<span style="position:fixed;top:60px;left:60px;outline: 1px solid #444;">Position Fixed 3</span>
</p>
As redes sociais e blog tem usado bastante esse recurso.
O próprio Facebook mantém a barra superior fixa independente da navegação do usuário e os alertas do Twitter
sempre aparecem no topo da página.
Finalizando, tenham cuidado ao utiliza-la.
Sempre optem pelo float para diagramação e position para pequenos ajustes.